import { defineConfig,loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
//两个插件使用之后不用手动导入vue里面的hooks，reactive等
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
//用于自动导入elementPlus用到的组件
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import path from 'path';
//autoprefixer 是 postcss 的功能插件，给 web 项目自动增加 css 前缀，兼容各种浏览器。
import autoprefixer from 'autoprefixer';
//引入svg雪碧图
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
	// ****打包文件名称****
	let fileName = 'dist'
	// 兼容性，以防打包崩溃
	fileName = env.VITE_APP_NAME
  return {
    base: './',
    define: {
			'process.env': {}
		},
    plugins: [
      vue(),
      // 自动导入
      AutoImport({
        imports: ["vue", "vue-router"],
        // 导入存储的文件地址
        dts: "src/auto-import.d.ts",
      }),
      // 自动导入组件
      Components({
        resolvers: [ElementPlusResolver()],
        // 存储的文件地址
        dts: "src/components.d.ts",
      }),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(__dirname, 'src/assets/images/svgs')]
      })
    ],
    resolve: {
      alias: {
        // 如果报错__dirname找不到，需要安装node,执行npm install @types/node
        "@": path.resolve(__dirname, "src"),
        "~@": path.resolve(__dirname, "src"),
        "comps": path.resolve(__dirname, "src/components"),
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: "@import 'src/assets/styles/index.scss';"
        }
      },
      postcss: {
        plugins: [
          autoprefixer({
            overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
          })
        ]
      }
    },
    //****这里进行设置文件名****
		build: {
			outDir: fileName,
			assetsPublicPath: './',
      minify: 'terser',
      terserOptions: {
        compress: {
          //生产环境时移除console.log
          drop_console: true,
          drop_debugger: true
        }
      }
		}
  }
});
